<template>
    <div class="row">
        <div class="col-sm-12">
            <div class="box">
                <div class="box-header">
                    <div class="box-title">
                        <button class="btn btn-primary">新增</button>
                    </div>
                </div>

                <div class="box box-header">
                    <form class="form-inline">
                        <div class="form-group">
                            <label for="ID">ID</label>
                            <input type="text" id="ID" class="form-control" placeholder="ID">
                        </div>
                        <div class="form-group">
                            <label for="role">角色</label>
                            <select id="role" class="form-control">
                                <option value="user">user</option>
                                <option value="teacher">teacher</option>
                                <option value="admin">admin</option>
                            </select>
                        </div>
                    </form>
                </div>

                <div class="box-body table-scroll-content">
                    <table class="table table-bordered table-hover table-striped table-keep-line">
                        <thead>
                            <tr>
                                <th>权限</th>
                                <th>ID</th>
                                <th>密码</th>
                                <th>姓名</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in list">
                                <td>{{index+1}}</td>
                                <td>{{item.sFullName}}</td>
                                <td>{{item.sFundTypeZh}}</td>
                                <td>{{item.sRunAudit}}</td>
                                <td>{{item.sRunAuditZh}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'user',
    data() {
        return {
            list: []
        }
    },
    methods: {
        getList() {
            let getBody = {
                pageIndex: 1,
                pageSize: 10,
                sStatus: "wyz",
                sFundType: 7,
                sFullName: '',  //组合名称 
                sContractName: '', //合同名称 
                sLinkPrincipalNo: '' //受托人
            }

            this.$http.post('http://120.25.208.147:10808/pms/v1/pension/basicInfo/pensionList?token=admin', getBody).then(reseponse => {
                console.info(reseponse.body.data.list)
                this.list = reseponse.body.data.list;
            })
            // for (let i = 0; i < 10; i++) {
            //     this.list.push(this.obj)
            // }
            // console.info(this.list)
        }
    },
    beforeCreate: function () {

    },
    created: function () {

    },
    mounted: function () {
        this.getList();
    }
}
</script>

<style lang="scss" scoped>
.box {
  padding: 10px;
}
/* 滚动条table */
.table-scroll-content {
  width: 100%;
  overflow: auto;
}
/* 水平table */
.table-keep-line {
  word-break: keep-all;
  white-space: nowrap;
  th {
    vertical-align: middle !important;
    text-align: center !important;
  }
  td {
    text-align: center !important;
  }
}
/* table-striped color  odd-奇数 even-偶数 */
.table-striped > thead > tr,
.table-striped > tbody > tr:nth-child(even) {
  background-color: #f5f5f5 !important;
}

.table-striped > tbody > tr:nth-child(odd) {
  background-color: #ffffff !important;
}

.table-striped > tbody > tr:hover {
  background-color: #f5f5f5 !important;
}
</style>
